<template>
    <div class="course-material">
        <div class="title"><img slot="icon" src="../img/border.png" height="20">{{name}} {{part}}</div>
        <div class="content" v-html="content"></div>
    </div>
</template>

<script>
    // import PenguinPlayer from '@/components/PenguinPlayer.vue'
    export default {
        name: 'course-material',
        data() {
            let materiaSrc = window.sessionStorage.getItem('materialInfo')
            let materia = materiaSrc ? JSON.parse(materiaSrc) : {}
            return {
                name: materia.name,
                part: materia.part,
                content: materia.content
            }
        },
        mounted(){

        }
    }
</script>

<style scoped lang="scss">
    .title{
        padding: .2rem .1rem .08rem;
        font-size: 16px;
        color: var(--deepColor);
        line-height: 20px;
        font-size: 18px;
        border-bottom: solid 1px var(--borderColor);
        img {
            float: left;
            margin-right: 5px;
        }
        .part{
            font-size: 14px;
        }
    }

    .content {
        padding: .15rem .1rem;
    }
</style>